<template>
  <div>
    <div v-if="upload" class="filter-container">
      <el-button v-permission="['mp:material_upload']" class="filter-item" type="primary" @click="openDialog">上传图片</el-button>
    </div>
    <div>
      <el-card v-for="(item,index) in list" :key="index" class="fl margin-10 text-center pic_item">
        <el-image :src="item.cover" :preview-src-list="imgViewers" class="pic"/>
        <div class="margin-10">
          <div class="margin-top-10">{{ item.createDate }}</div>
          <el-button v-if="selected" type="success" size="mini" class="margin-top-10" icon="el-icon-check" @click="chooseItem(item)">选择</el-button>
          <el-button type="success" size="mini" class="margin-top-10" icon="el-icon-view" @click="viewer(item)">浏览</el-button>
          <el-button v-permission="['mp:material_delete']" v-if="deleted" type="success" size="mini" class="margin-top-10" icon="el-icon-delete" @click="removeMaterial(item)">删除</el-button>
        </div>
      </el-card>
      <div class="clearfix"/>
      <pagination v-permission="['mp:material_list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initList"/>
    </div>
    <el-dialog :close-on-click-modal="false" :title="'上传图片'" :visible.sync="dialogVisible" width="60%" append-to-body @close="closeDialog">
      <el-header>图片（image）: 最大2M，支持bmp/png/jpeg/jpg/gif格式</el-header>
      <uploader :limit="6" :file-list.sync="fileList" @success="successUpload" @remove="removeUpload"/>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="waiting" @click="closeDialog">取消</el-button>
        <el-button v-permission="['mp:material_upload']" :loading="waiting" type="primary" @click="addMaterial">确定</el-button>
      </div>
    </el-dialog>
    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImageViewer" :url-list="imgViewers" />
  </div>
</template>
<script>
import { MpMaterialService } from '@/api/WeChatService'
import Pagination from '@/components/Pagination'
import Uploader from '@/components/Uploader'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { Alert, Notify } from '@/utils/notify'

export default {
  name: 'WeChatMpMaterialPic',
  components: { Pagination, Uploader, ElImageViewer },
  props: {
    platformId: { type: Number, default: 0 },
    upload: { type: Boolean, default: true },
    selected: { type: Boolean, default: true },
    deleted: { type: Boolean, default: true }
  },
  data() {
    return {
      imgViewerVisible: false, imgViewers: [],
      list: undefined, total: 0, listLoading: true, fileList: [], dialogVisible: false, dataForm: [], waiting: false,
      listQuery: { pageNo: 1, pageSize: 20, type: 'image', platformId: this.platformId }, dialogFormVisible: false
    }
  },
  watch: {
    platformId(val) {
      this.listQuery.platformId = val
      this.listQuery.pageNo = 1
      this.list = []
      this.total = 0
    }
  },
  methods: {
    initList() {
      this.listLoading = true
      MpMaterialService.getMaterials(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    chooseItem(data) {
      this.$emit('choose', data)
    },
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.fileList = []
      this.dataForm = []
      this.dialogVisible = false
      this.waiting = false
    },
    successUpload(data) {
      this.dataForm.push({ fileName: data.originName, type: this.listQuery.type, platformId: this.platformId, file: data.path })
    },
    removeUpload(index) {
      this.dataForm.splice(index, 1)
    },
    addMaterial() {
      if (this.dataForm.length === 0) {
        Alert.warn(this, '请上传图片!')
        return
      }
      this.waiting = true
      MpMaterialService.uploadMaterials(this.dataForm).then(() => {
        this.closeDialog()
        this.initList()
      })
    },
    closeImageViewer() {
      this.imgViewerVisible = false
      this.imgViewers = []
    },
    viewer(item) {
      this.imgViewerVisible = true
      this.imgViewers = [item.cover]
    },
    removeMaterial(item) {
      const that = this
      this.$confirm('您确认删除该素材吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        MpMaterialService.deleteMaterial({ platformId: item.platformId, mediaId: item.mediaId }).then(() => {
          that.initList()
          Notify.success(that, '删除成功!')
        })
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
  .pic_item{width:250px;
    .pic{width:100%;height:100%;}
    .el-card__body{padding:5px;} }
</style>
